<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <link href="css/icons.css" rel="stylesheet" type="text/css">
    <title>主页</title>
    <!--    <style type="text/css">
            body, html {
                width: 100%;
                height: 100%;
                overflow: hidden;
                margin: 0;
                font-family: "微软雅黑";
                text-align: center
            }

            #allmap {
                width: 80%;
                height: 80%;
                overflow: hidden;
                margin: 0 auto;
                font-family: "微软雅黑";
            }
        </style>-->
    <!--       <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=0FTRgVnSrizWq1zDFTqG3rKpuGc0YwPj"></script>-->
    <!-- <script src="../../static/js/lib/jquery.min.js"></script>-->
</head>


<body>
<script>
    document.onclick = function (e) {

        /**
         * 根据鼠标点击坐标初始化dom，通过过渡属性实现动画效果
         * dom渲染完成后设置目标偏移位置及目标透明度
         * 过渡结束后移除dom
         * @author:slzs
         */
        var symbol = document.createElement("div");

        symbol.style.position = "absolute";
        symbol.style.left = (e.pageX) + "px";
        symbol.style.top = (e.pageY) + "px";
        symbol.style.zIndex = 9999;
        symbol.style.transition = "all 1.5s";
        symbol.style.border = "1px red solid";
        symbol.style.borderColor = `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`; // 随机颜色
        symbol.style.borderRadius = "100%";
        symbol.style.width = "0px";
        symbol.style.height = "0px";
        symbol.addEventListener("transitionend", function (et) { // 动画结束移除dom
            if (et.propertyName === "opacity" && et.srcElement.style.opacity === 0)
                et.srcElement.remove();
        });

        document.body.appendChild(symbol);

        requestAnimationFrame(() => {
            symbol.style.width = "80px";
            symbol.style.margin = "-7px -40px";
            symbol.style.height = "14px";
            symbol.style.opacity = 0;
        });
    };
</script>
</body>
</html>